<template>
  <h1>主页</h1>
	
		<up-swiper
		            :list="list1"
		            @change="change"
		            @click="click"
		    ></up-swiper>
			<up-card :title="title" :sub-title="subTitle" :thumb="thumb">
			        <template #body>
			            <view class="" slot="body">
			                <view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
			                    <view class="u-body-item-title u-line-2"></view><br>
			                    <image src="https://img1.baidu.com/it/u=2430386350,3373331340&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1730221200&t=fe5324aaeae9834f3c1790b8d4b5949f" mode="aspectFill"></image>
			                </view>
			                <view class="u-body-item u-flex u-row-between u-p-b-0">
			                    <view class="u-body-item-title u-line-2"></view>
			                    <image src="">11</image>
			                </view>
			            </view>
			        </template>
			        <template #foot>
					    <view>
			                <up-icon name="chat-fill" size="34" color="" label="30评论"></up-icon>
			            </view>
			        </template>
				</up-card>
	
		
	
</template>

<script setup>
	 import { reactive } from 'vue';
	 // 使用 reactive 创建响应式数组  
	 const list1 = reactive([  
	     'https://img2.baidu.com/it/u=3460080094,1460455913&fm=253&app=138&size=w931&n=0&f=GIF&fmt=auto?sec=1730221200&t=ff876f4db89b78e4bfe6a5a4971ab417',  
	     'https://img1.baidu.com/it/u=3491050582,1211424130&fm=253&app=138&size=w931&n=0&f=GIF&fmt=auto?sec=1730221200&t=af9c729a4949ce2bb449548a1e19a393',  
	     'https://img1.baidu.com/it/u=3553418874,443429195&fm=253&app=138&size=w931&n=0&f=GIF&fmt=auto?sec=1730221200&t=cf80ea98c0fe735ccb2763606ab7bb48',  
	 ]);  
	
</script>

<style scoped lang="scss">
.text {
	$up-bg-color: #f3f4f6;

	color: $up-bg-color;
	.u-card-wrap { 
			background-color: $up-bg-color;
			padding: 1px;
		}
		
		.u-body-item {
			font-size: 32rpx;
			color: #333;
			padding: 20rpx 10rpx;
		}
			
		.u-body-item image {
			width: 120rpx;
			flex: 0 0 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
			margin-left: 12rpx;
		}
}


</style>